<template>
    <div id="en">
        <!--
     v-model 可以让数据和视图，形成双向数据绑定
     (1) 数据变化，视图自动更新
     (2) 视图变化，数据自动更新
     可以快速[获取]或[设置]表单元素的内容
    -->
        账户：<input type="text" v-model="username"> <br><br>
        密码：<input type="password" v-model="password"> <br><br>
        <button @click="login">登录</button>
        <button @click="reset">重置</button>



    </div>
</template>

<script>
    export default {
        name: "13-vue v-model",
        data() {
            return {
                username: '',
                password: ''
            }
        },
        methods: {
            login() {
                console.log('输出账号密码', this.username, this.password)
            },
            reset() {
                this.password = this.username = ''
            }
        }
    }
</script>

<style scoped>

</style>